<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 渲染数据-使用watch 监听器实现 -->
        <!-- <ul>
            <li v-for="item in schoolList" :key="item.id">{{item.school_name}}</li>
        </ul> -->

        <!-- 渲染数据-使用计算属性实现 -->
        <ul>
            <li v-for="item in schoolList" :key="item.id">{{item.school_name}}</li>
        </ul>
        <p>{{schoolList}}</p>
        <!-- 第几页 -->
        <button @click="currentPage++">第{{currentPage}}页数据</button>
    </div>
</body>

</html>
<script>
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                currentPage: 1,  // 当前页为第一页
                // schoolList: [], // 定义的为学校的数组
            }
        },
        computed: {
            async schoolList() {
                // console.log('计算属性');
                // let schoolList = []
                // axios({
                //     method: 'get',
                //     url: 'https://api.i-lynn.cn/college?page=' + this.currentPage
                // }).then(res => {
                //     // console.log('res', res);
                //     schoolList = res.data.data.list1

                // })
                // 要求返回的就是学校数据列表
                let res = await axios({ method: 'get', url: 'https://api.i-lynn.cn/college?page=' + this.currentPage })
                // console.log('res1', res.data.data.list1);
                let schoolList = res.data.data.list1;
                console.log('schoolList', schoolList);
                return schoolList
            }
        },


        // watch: {
        //     // 第一种方式: 简写方式
        //     // currentPage(newvalue) {
        //     //     console.log(newvalue);
        //     //     // 发送请求请求数据

        //     // },
        //     // 第二种方式: 常规写法,初始化监听
        //     currentPage: {
        //         handler(newvalue) {
        //             console.log(newvalue);
        //             //发送数据请求
        //             axios({
        //                 method: 'get',
        //                 url: 'https://api.i-lynn.cn/college?page=' + this.currentPage
        //             }).then(res => {
        //                 console.log('res', res);
        //                 this.schoolList = res.data.data.list1

        //             })
        //         },
        //         immediate: true // 立即监听
        //     }
        // }

    }).mount('#app') 
</script>